<template>
	<!--<div class="video">
		<section v-for="item in videoList">
			<div class="video_list">
				<div class="video_img">
					<div class="video_mask">
						<h3>{{item.title}}</h3>
					</div>
					<img :src="item.large_image_url"/>
					<span class="video_btn"></span>
				</div>
				<div class="video_info">
					<ul>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
						<li class="time">23分钟前</li>
					</ul>
				</div>
			</div>
		</section>
	</div>-->
</template>

<script>
	import CONFIG from "@/config";
	import axois from 'axios';
	export default{
		mounted(){
			this._getVid(),
			this._scroll()
		},
		data(){
			return {
				videoList:[]
			}
		},
		methods:{
			_getVid(){
				var url = CONFIG.domain+"/video?rid=1";
				axois.get(url).then((res)=>{
					this.videoList = res.data.data;
					console.log(this.videoList)
				})
			},
			_scroll(){
				let _this = this;
				let sw = true;
				let n = 2;
				 window.addEventListener('scroll',function(){
//					console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight);
//				 	console.log(document.body.scrollTop);
//				 	console.log(document.body.offsetHeight);
					 if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight){
//					 	console.log(sw)
					 	if(sw==true){
					 		sw=false;
					 		var url = CONFIG.domain+"/video?rid="+(n++)+""
				axois.get(url).then((res)=>{
//					this.newList = res.data.data;
//					console.log(res.data.data)
					if(res.data.data!=undefined){
					for(var i=0;i<res.data.data.length;i++){
//						console.log(res.data.data[i])
							_this.videoList.push(res.data.data[i])
						}
					}
					sw = true
				})
					 	}
					 }
				 })
			},
		}
	}
</script>

<style lang="scss">
	.video{
		padding: 0 4.5%;
		padding-top: 84px;
		section{
			padding: 16px 0;
			.video_list{
				.video_img{
					position: relative;
					width: 100%;
					height: 40%;
					.video_mask{
						position: absolute;
						top: 0;
						h3{
							font-size: 16px;
							color: #fff;
							font-weight: normal;
							margin: 5px 10px;
						}
					}
					img{
						width: 100%;
					}
					.video_btn{
						display: block;
					    position: absolute;
					    left: 0;
					    top: 0;
					    bottom: 0;
					    right: 0;
					    background: url(//s3.pstatp.com/growth/mobile_list/image/playicon_video@3x_dcf536ff.png) no-repeat center center;
					    background-size: 50px;
					}
				}
				.video_info{
					font-size: 12px;
					color: #aaa;
					ul{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						line-height: 25px;
						.label{
							color: #f85959;
						    border: 1px solid rgba(248, 89, 89, 0.5);
    						border-radius: 4px;
    						text-align: center;
    						line-height: 16px;
    						padding: 1px;
    						margin-right: 5px;
						}
						.source{
							margin-right: 5px;
						}
						.comment{
							margin-right: 5px;
							
						}
					}
				}
			}
		}
	}
</style>